<template>
	<!-- 新增走访人页面 -->
	<view>
		<view class="visitor">
			<text>回访用户信息</text>
		</view>
		<!-- 表单 -->
		<view class="form">
			<view class="form-top">

				<view
					style="display:flex;justify-content: space-between;align-items: center;width:100%;height:90rpx;border-bottom:1rpx solid #F2F2F3">
					<view class="lt" style="width:140rpx">
						姓名
					</view>
					<view class="rt" style="width:calc(100% - 140rpx)">
						<u--input v-model="name" border="none" placeholder="请输入" inputAlign="right"></u--input>
					</view>
				</view>
				<view
					style="display:flex;justify-content: space-between;align-items: center;width:100%;height:90rpx;border-bottom:1rpx solid #F2F2F3">
					<view class="lt" style="width:140rpx">
						性别
					</view>
					<view class="rt" style="width:calc(100% - 140rpx)" @click="sexChose">
						<u--input v-model="sexname" disabled disabledColor="#ffffff" placeholder="请选择" border="none"
							inputAlign="right">
						</u--input>
					</view>
				</view>
				<view
					style="display:flex;justify-content: space-between;align-items: center;width:100%;height:90rpx;border-bottom:1rpx solid #F2F2F3">
					<view class="lt" style="width:140rpx">
						年龄
					</view>
					<view class="rt" style="width:calc(100% - 140rpx)">
						<u--input v-model="age" type="number" border="none" inputAlign="right" placeholder="请输入">
						</u--input>

					</view>
				</view>
				<view
					style="display:flex;justify-content: space-between;align-items: center;width:100%;height:90rpx;border-bottom:1rpx solid #F2F2F3">
					<view class="lt" style="width:140rpx">
						手机号
					</view>
					<view class="rt" style="width:calc(100% - 140rpx)">
						<u--input type="number" v-model="phone" inputAlign="right" border="none" maxlength='11'
							placeholder="请输入">
						</u--input>

					</view>
				</view>

				<view
					style="display:flex;justify-content: space-between;align-items: center;width:100%;height:90rpx;border-bottom:1rpx solid #F2F2F3">
					<view class="lt" style="width:140rpx">
						身份证号
					</view>
					<view class="rt" style="width:calc(100% - 140rpx)">
						<u--input v-model="idcard" border="none" inputAlign="right" placeholder="请输入" maxlength='18'>
						</u--input>

					</view>
				</view>

				<view
					style="display:flex;justify-content: space-between;align-items: center;width:100%;height:90rpx;border-bottom:1rpx solid #F2F2F3">
					<view class="lt" style="width:140rpx">
						地址
					</view>
					<view class="rt" style="width:calc(100% - 140rpx)">
						<picker mode="multiSelector" :range="mulSelect" :range-key="'name'" @change="pickerChange"
							@columnchange="colChange">
							<view style="display:flex;justify-content: flex-end;" :class="{active:isActive}">{{address}}
							</view>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</picker>

					</view>
				</view>

				<view
					style="display:flex;justify-content: space-between;align-items: center;width:100%;height:120rpx;border-bottom:1rpx solid #F2F2F3">
					<view class="lt"
						style="width:140rpx;display:flex;align-items: flex-start;height:120rpx;padding-top:45rpx">
						详细地址
					</view>
					<view class="rt" style="width:calc(100% - 140rpx)">
						<textarea style="height:120rpx;padding-top:40rpx;" v-model="detail" placeholder="请输入详细地址"
							placeholder-style="color: #C0C6DB" border="none"></textarea>
					</view>
				</view>




			</view>



			<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false"
				@select="sexSelect">
			</u-action-sheet>

		</view>



		<view class="button">
			<u-button type="primary" shape="circle" @click="submit">提交</u-button>
		</view>


		<!-- <uni-data-picker :localdata="provinceList" popup-title="请选择班级" @change="onchange" @nodeclick="onnodeclick">
		</uni-data-picker> -->
	</view>
</template>

<script>
	import Vue from 'vue'
	export default {

		data() {
			return {
				showSex: false,
				showLiving: false,
				showHealth: false,
				showPersonal: false,
				showReturnvisit: false,
				valueposition: true,
				sexname: "",
				name: '',
				sex: '',
				age: '',
				living: '',
				health: '',
				personal: '',
				need: '',
				other: '',
				returnVisit: '',
				phone: '',
				idcard: '',
				// 地址
				address: '',
				// 需求
				need: '',
				// 其他
				other: '',
				// 图片上传
				fileList1: [],
				detail: '',
				//地址下标
				popup: {
					show: false,
				},
				// 选择选性别
				actions: [{
						name: '男',
						value: 1
					},
					{
						name: '女',
						value: 0
					},

				],
				group_id: 1,
				provinceList: [],
				province: [], //省数组
				city: [], //市数组
				district: [], //区数组
				street: [], //街道数组
				mulSelect: [], //四级联动显示数组，该数组的值为[[province],[city],[district],[street]]
				provinceId: '', //省的id
				cityId: '', //市的id
				districtId: '', //区的id
				countryId: '', //村的id
				address: '请选择地址',
				isActive: false, //字体颜色样式
				addressText: '',

			}

		},

		onShow() {
			// this.getAddress();

			this.group_id = uni.getStorageSync("group_id");
			if (this.group_id == 1) {
				uni.setNavigationBarTitle({
					title: '回访记录'
				});
				console.log(555)
				uni.setTabBarItem({
					index: 0,
					text: '首页',
					iconPath: '/static/index/home.png',
					selectedIconPath: '/static/index/homeselect.png',
				});
				uni.setTabBarItem({
					index: 1,
					text: '新增',
					iconPath: '/static/index/newadd.png',
					selectedIconPath: '/static/index/addselect.png',
					visible: false
				});
				uni.setTabBarItem({
					index: 2,
					text: '我的',
					iconPath: '/static/index/mine.png',
					selectedIconPath: '/static/index/mineselect.png',
				});

			}
			if (this.group_id == 2) {
				uni.setNavigationBarTitle({
					title: '回访记录'
				});
				uni.setTabBarItem({
					index: 0,
					text: '首页',
					iconPath: '/static/index/home.png',
					selectedIconPath: '/static/index/homeselect.png'
				});
				uni.setTabBarItem({
					index: 1,
					text: '新增',
					iconPath: '/static/index/newadd.png',
					selectedIconPath: '/static/index/addselect.png',
					visible: false

				});
				uni.setTabBarItem({
					index: 2,
					text: '我的',
					iconPath: '/static/index/mine.png',
					selectedIconPath: '/static/index/mineselect.png'
				});




			}
			if (this.group_id == 3) {
				uni.setNavigationBarTitle({
					title: '走访记录'
				});
				uni.setTabBarItem({
					index: 1,
					text: '首页',
					iconPath: '/static/index/home.png',
					selectedIconPath: '/static/index/homeselect.png'
				});
				uni.setTabBarItem({
					index: 1,
					text: '新增',
					iconPath: '/static/index/newadd.png',
					selectedIconPath: '/static/index/addselect.png'
				});
				uni.setTabBarItem({
					index: 2,
					text: '我的',
					iconPath: '/static/index/mine.png',
					selectedIconPath: '/static/index/mineselect.png'
				});
			}


		},
		
		methods: {

			sexChose() {
				this.showSex = true;
			},
			// 选择性别
			sexSelect(e) {
				this.sex = e.value,
					this.sexname = e.name
			},

			// 提交表单
			submit() {
				if (!this.provinceId || !this.cityId || !this.districtId || !this.countryId) {
					this.toastMsg("请选择地址");
					return;
				}
				if (!this.name) {
					this.toastMsg("请输入姓名");
					return;
				}
				if (!this.sex) {
					this.toastMsg("请输入性别");
					return;
				}

				if (!this.age) {
					this.toastMsg("请输入年龄");
					return;
				}
				if (!this.phone) {
					this.toastMsg("请输入手机号");
					return;
				}

			

				if (!this.idcard) {
					this.toastMsg("请输入身份证号");
					return;
				}
				if (!this.detail) {
					this.toastMsg("请输入详细地址");
					return;
				}

				let obj = {};
				obj.name = this.name;
				obj.sex = this.sex;
				obj.age = this.age;
				obj.phone = this.phone;
				obj.idcard = this.idcard;
				obj.city_id = this.provinceId;
				obj.q_id = this.cityId;
				obj.zhen_id = this.districtId;
				obj.area_id = this.countryId;
				obj.city = this.addressText;
				obj.detail = this.detail;

				this.$api.post('/api/villagers/addVillager', obj).then((res) => {

					if (res.code == 1) {

						this.LoadingMsg(res.msg);
						setTimeout(() => {
							uni.hideLoading();

							uni.switchTab({
								url: '../index/index'
							})
						}, 1500);
					} else {
						this.toastMsg(res.msg);
					}
				})







			},
			
			pickerChange(e) {
				console.log(34343434)
				//什么都不选的话，e.detail.value的值为[null,null,null,null]
				//只选择省的话，e.detail.value的值为[数字,null,null,null]
				//只选择市的话，e.detail.value的值为[数字,数字,null,null]
				//所以获取e.detail.value的值先判断是否为null，如果为null则取值为0
				for (var i = 0; i < e.detail.value.length; i++) {
					if (!e.detail.value[i]) {
						e.detail.value[i] = 0;
					}
				}

				var s_province = this.mulSelect[0][e.detail.value[0]]; //获取选中的省
				var s_city = this.mulSelect[1][e.detail.value[1] || 0]; //获取选中的市
				var s_district = this.mulSelect[2][e.detail.value[2] || 0]; //获取选中的区
				var s_street = this.mulSelect[3][e.detail.value[3] || 0]; //获取选中的街道
				console.log(e.detail.value);
				//赋值显示在页面
				this.address = s_province.name + s_city.name + s_district.name + s_street.name;
				this.addressText = s_province.name + '/' + s_city.name + '/' + s_district.name
				//将字体颜色修改为黑色
				this.isActive = true;
			},
			colChange(e) {
				if (e.detail.column == 0) {
                     console.log(e.detail.value)
					this.provinceId = this.provinceList[e.detail.value].id;
					console.log(this.provinceId)

					this.getCity();
					Vue.set(this.mulSelect, 1, this.city)


					this.getDistrict();
					Vue.set(this.mulSelect, 2, this.district)
					this.getStreet();
					Vue.set(this.mulSelect, 3, this.street)
				} else if (e.detail.column == 1) {

					//选择市
					for (var i = 0; i < this.provinceList.length; i++) {
						if (this.provinceList[i].id == this.provinceId) {
							this.cityId = this.provinceList[i].children[e.detail.value].id;
						}
					}
                   
					this.getDistrict();
					Vue.set(this.mulSelect, 2, this.district)
                    this.getStreet();
					Vue.set(this.mulSelect, 3, this.street)
				

				} else if (e.detail.column == 2) {
     //                console.log(22222)
				
					
					//选择区
					for (var i = 0; i < this.provinceList.length; i++) {
						if (this.provinceList[i].id == this.provinceId) {
							for (var j = 0; j < this.provinceList[i].children.length; j++) {
								if (this.provinceList[i].children[j].id == this.cityId) {
									this.districtId = this.provinceList[i].children[j].children[e.detail.value].id;
									console.log(this.districtId)
									for(var k = 0; k < this.provinceList[i].children[j].children.length; k++){
										if (this.provinceList[i].children[j].children[k].id == this.districtId) {
											this.countryId =  this.provinceList[i].children[j].children[k].children[e.detail.value].id;
									}
									}
								}
							}
						}
					}
                  
					// this.getDistrict();
					// Vue.set(this.mulSelect, 2, this.district)
					this.getStreet();
					Vue.set(this.mulSelect, 3, this.street)
				}else if (e.detail.column ==3) {

					for (var i = 0; i < this.provinceList.length; i++) {
						if (this.provinceList[i].id == this.provinceId) {
							for (var j = 0; j < this.provinceList[i].children.length; j++) {
								if (this.provinceList[i].children[j].id == this.cityId) {
									for(var k = 0; k < this.provinceList[i].children[j].children.length; k++){
										
										if(this.provinceList[i].children[j].children[k].id == this.districtId){
											this.countryId = this.provinceList[i].children[j].children[k].children[e.detail.value].id;
											console.log(this.countryId)
											console.log(45454545)
										}
									     
									
									}



								}
							}
						}
					}
                    
					
				}

			},
          getAddress() {
				this.$api.post('/api/villagers/getCityList').then((res) => {
					this.provinceList = [];
					if (res.code == 1) {
						this.provinceList = res.data;
						console.log(this.provinceList)
					// 	var distr = {};
					
					// 	if(this.provinceList[0].children[0].children.length>0){
					// 		 distr.id = this.provinceList[0].children[0].children[0].id;
					// 	}
					// 	if(this.provinceList[0].children[0].children.length>0){
					// 		 distr.name = this.provinceList[0].children[0].children[0].name;
					// 	}
						
						 
						
						for (var i = 0; i < this.provinceList.length; i++) {
							var pro = {};
							pro.id = this.provinceList[i].id; //获取省id
							pro.name = this.provinceList[i].name; //获取省名

							this.province.push(pro); //将获取到的id，name放入省名称数组
							this.provinceId =this.province[0].id; 
							for(var k = 0; k < this.provinceList[i].children.length; k++){
								var cit = {};
								cit.id = this.provinceList[i].children[k].id;
								 cit.name = this.provinceList[i].children[k].name;
								this.city.push(cit);
								console.log(this.city);
								this.cityId =this.city[0].id;
								
								
							}
							
							for(var g = 0; g < this.provinceList[i].children[0].children.length; g++){
								
								if(this.provinceList[i].children[0].children.length>0){
									console.log(this.provinceList[i].children[0 ].children)
									console.log(7777);
									var distr = {}
									distr.id = this.provinceList[i].children[0].children[g].id;
									 distr.name = this.provinceList[i].children[0].children[g].name;
									 
									 this.district.push(distr);
									this.districtId =this.district[0].id;
								}
								
								
							}
							
							if(this.provinceList[i].children[0].children.length>0){
								if(this.provinceList[i].children[0].children[0].children.length>0){
									// this.districtId =this.provinceList[i].children[0].children[0].id;
									for(var h = 0; h < this.provinceList[i].children[0].children[0].children.length; h++){
										
										if(this.provinceList[i].children[0].children[0].children.length>0){
											// this.countryId =this.provinceList[i].children[0].children[0].children[0].id;
											console.log(this.provinceList[i].children[0].children[0].children)
											console.log(7777);
											var str = {}
											str.id = this.provinceList[i].children[0].children[0].children[h].id;
											 str.name = this.provinceList[i].children[0].children[0].children[h].name;
											 
											 this.street.push(str);
											this.countryId =this.street[0].id;
										}
										
										
									}
								}
							}
						}

					} else {
						this.toastMsg(res.msg);
					}
				})
			},
			getCity() {
				console.log(999)
				
				this.street = [];
				for (var i = 0; i < this.provinceList.length; i++) {
					//寻找与省id匹配的索引
					if (this.provinceList[i].id == this.provinceId) {

						if (this.city.length) { //清空历史数据
							this.city = [];
							this.street = [];
						}

						for (var j = 0; j < this.provinceList[i].children.length; j++) {
							var ci = {};
							ci.id = this.provinceList[i].children[j].id; //获取城市id
							ci.name = this.provinceList[i].children[j].name; //获取城市名
							console.log(ci.name)
							//将城市id，name放入城市数组
							this.city.push(ci);
							// console.log(this.city)
							
							for(var k = 0;k < this.city[j].children.children.length; k++){
									console.log(this.this.city[j].children)
									console.log(898983333333333)
								
								if(this.city[j].children.length>0){
									
									console.log(this.city[j].children)
									var distr = {};
									distr.id = this.city[j].children[0].id;
									distr.name = this.city[j].children[0].name;
									this.district.push(distr)
									
									// this.districtId = this.district[0].id;
									console.log(this.districtId )
								}
							}
							
							for(var k = 0; k < this.provinceList[i].children[j].children.length; k++){
								
								
								if(this.provinceList[i].children[j].children[k].length>0){
									
									var str = {}; 
									str.id = this.city[j].children[0].id;
									str.name = this.city[j].children[0].name;
									this.street.push(str)
									
									// this.countryId = this.street[k].id;
									// console.log(this.countryId )
								}
							}
							
							
							
							
							
						}
					}
				}
			},
			getDistrict() {
				
			
				for (var i = 0; i < this.provinceList.length; i++) {
					//寻找与省id匹配的索引
					// console.log(this.provinceId)
					// console.log(this.districtId)
					if (this.provinceList[i].id == this.provinceId) {
						// console.log(this.provinceId)
						for (var j = 0; j < this.provinceList[i].children.length; j++) {
							//寻找与市id匹配的索引
							if (this.provinceList[i].children[j].id == this.cityId) {
								console.log(this.cityId)
								if (this.district.length) { //清空历史数据
									this.district = [];
									
								}
								for (var k = 0; k < this.provinceList[i].children[j].children.length; k++) {
									var di = {};
									di.id = this.provinceList[i].children[j].children[k].id; //获取区id
									di.name = this.provinceList[i].children[j].children[k].name; //获取区名
									//将区id，name放入区数组
									this.district.push(di);
									this.districtId =this.district[0].id;
									console.log(this.district)
										for(var h = 0; h < this.provinceList[i].children[j].children[k].children.length; h++){
											
											if(this.provinceList[i].children[j].children[k].children.length>0){
												console.log(this.provinceList[i].children[j].children[k].children)
												console.log(78787878787878);
												var str = {}
												str.id = this.provinceList[i].children[j].children[k].children[h].id;
												 str.name = this.provinceList[i].children[j].children[k].children[h].name;
												 
												 this.street.push(str);
												 console.log( this.street)
												// this.countryId =this.street[0].id;
											}
											
											
										}
								}
								
							}
						}
					}
				}
			},
			getStreet() {
				console.log(6676767676)
				this.street= [];
				
				for (var i = 0; i < this.provinceList.length; i++) {
					//寻找与省id匹配的索引
					if (this.provinceList[i].id == this.provinceId) {
						for (var j = 0; j < this.provinceList[i].children.length; j++) {
							//寻找与市id匹配的索引
							if (this.provinceList[i].children[j].id == this.cityId) {
								for (var k = 0; k < this.provinceList[i].children[j].children.length; k++) {
									//寻找与区id匹配的索引
									if (this.provinceList[i].children[j].children[k].id == this.districtId) {
										//循环遍历输出街道
										if (this.street.length) { //清空历史数据
											this.street = [];
										}
										for (var l = 0; l < this.provinceList[i].children[j].children[k].children
											.length; l++) {
												if(this.provinceList[i].children[j].children[k].children.length>0){
													var st = {};
													st.id = this.provinceList[i].children[j].children[k].children[l].id;
													st.name = this.provinceList[i].children[j].children[k].children[l].name;
													
													this.street.push(st);
													this.countryId =this.street[l].id;
												}
											
										}
									}
								}
							}
						}
					}
				}
			}
		},
		onLoad(query) {
			// _thit.getInfo();
			this.group_id = uni.getStorageSync("group_id");
			this.getAddress();
			this.mulSelect.push(this.province);

			this.provinceId = '';
			this.getCity();
			this.mulSelect.push(this.city);

			this.cityId = '';
			this.getDistrict();
			this.mulSelect.push(this.district);

			this.districtId = '';
			this.getStreet();
			this.mulSelect.push(this.street);
			this.countryId = '';
			// console.log(this.mulSelect)

		},
	}
</script>
<style lang="scss">
	page {
		background-color: #EFF1F5;
	}
</style>

<style lang="scss" scoped>
	.visitor {
		margin: 30rpx;
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
	}

	.visitors {
		margin: 30rpx -20rpx;
		padding: 0px 30rpx;
		background-color: #EFF1F5;
	}

	.form {
		margin: 30rpx;

		.form-top {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
		}

		.form-bottom {
			background-color: #fff;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			padding: 20rpx;
		}
	}


	.VisitorInformation_list {
		background-color: #FFFFFF;
		padding: 0px 30rpx 30rpx 30rpx;

		// display: flex;
		color: #666;
		// justify-content: space-between;

		._select {
			display: flex;
			color: #AAAAAA;
			font-size: 30rpx;

			view {
				margin-right: 6rpx;
			}
		}

		.VisitorInformation_list_image {
			margin: 30rpx 0 0 0;
			display: inline-block;
			padding-right: 20rpx;
		}

	}

	.upload {
		background-color: #FFFFFF;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		border-bottom: none;
	}

	.uploadtext {
		color: #CCCCCC;
		font-size: 26rpx;
	}

	.positions {
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;
		margin: 30rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		color: #666666;
		font-size: 30rpx;

		view:last-child {
			padding-top: 6rpx;
		}
	}

	.button {
		margin: 30rpx;

		.u-button {
			background-color: #0C68FD;
		}
	}
</style>
